<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar title="个人中心" />

    <!-- 用户信息卡片 -->
    <div class="user-card card">
      <div class="user-avatar">
        <van-image
          :src="userInfo.avatar"
          round
          width="60"
          height="60"
          fit="cover"
        >
          <template #error>
            <van-icon name="user-circle-o" size="60" color="#ddd" />
          </template>
        </van-image>
      </div>
      <div class="user-info">
        <h3 class="user-name">{{ userInfo.name }}</h3>
        <p class="user-desc">{{ userInfo.description }}</p>
        <div class="user-level">
          <van-tag type="primary" size="small">{{ userInfo.level }}</van-tag>
          <span class="level-progress">学习进度 {{ userInfo.progress }}%</span>
        </div>
      </div>
      <van-button size="small" @click="editProfile">编辑</van-button>
    </div>

    <!-- 学习统计 -->
    <div class="stats-section">
      <h3 class="section-title">学习统计</h3>
      <div class="stats-grid">
        <div class="stat-card card">
          <div class="stat-icon">
            <van-icon name="bookmark-o" color="#1989fa" size="24" />
          </div>
          <div class="stat-info">
            <span class="stat-number">{{ favoriteWords.length }}</span>
            <span class="stat-label">收藏单词</span>
          </div>
        </div>
        <div class="stat-card card">
          <div class="stat-icon">
            <van-icon name="fire-o" color="#ff976a" size="24" />
          </div>
          <div class="stat-info">
            <span class="stat-number">{{ userStats.studyDays }}</span>
            <span class="stat-label">连续学习</span>
          </div>
        </div>
        <div class="stat-card card">
          <div class="stat-icon">
            <van-icon name="medal-o" color="#07c160" size="24" />
          </div>
          <div class="stat-info">
            <span class="stat-number">{{ userStats.totalWords }}</span>
            <span class="stat-label">学过单词</span>
          </div>
        </div>
        <div class="stat-card card">
          <div class="stat-icon">
            <van-icon name="clock-o" color="#ee0a24" size="24" />
          </div>
          <div class="stat-info">
            <span class="stat-number">{{ userStats.studyTime }}</span>
            <span class="stat-label">学习时长</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习目标 -->
    <div class="goal-section card">
      <div class="section-header">
        <h3 class="section-title">今日目标</h3>
        <van-button size="small" @click="setGoal">设置</van-button>
      </div>
      <div class="goal-progress">
        <div class="goal-item">
          <span class="goal-label">学习单词</span>
          <van-progress
            :percentage="(userStats.todayWords / userStats.dailyGoal) * 100"
            color="#1989fa"
            track-color="#f2f3f5"
          />
          <span class="goal-text">{{ userStats.todayWords }}/{{ userStats.dailyGoal }}</span>
        </div>
        <div class="goal-item">
          <span class="goal-label">学习时长</span>
          <van-progress
            :percentage="(userStats.todayTime / userStats.timeGoal) * 100"
            color="#07c160"
            track-color="#f2f3f5"
          />
          <span class="goal-text">{{ userStats.todayTime }}/{{ userStats.timeGoal }}分钟</span>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
      <van-cell-group>
        <van-cell
          title="学习记录"
          icon="chart-trending-o"
          is-link
          @click="goToRecord"
        />
        <van-cell
          title="错题本"
          icon="warning-o"
          is-link
          @click="goToErrors"
        />
        <van-cell
          title="学习计划"
          icon="calendar-o"
          is-link
          @click="goToPlan"
        />
        <van-cell
          title="设置"
          icon="setting-o"
          is-link
          @click="goToSettings"
        />
      </van-cell-group>
    </div>

    <!-- 成就徽章 -->
    <div class="achievement-section card">
      <h3 class="section-title">成就徽章</h3>
      <div class="badge-grid">
        <div
          v-for="badge in achievements"
          :key="badge.id"
          :class="['badge-item', { 'achieved': badge.achieved }]"
          @click="showBadgeDetail(badge)"
        >
          <van-icon :name="badge.icon" :size="32" />
          <span class="badge-name">{{ badge.name }}</span>
        </div>
      </div>
    </div>

    <!-- 底部操作 -->
    <div class="bottom-actions">
      <van-button type="primary" block @click="startStudy">
        开始学习
      </van-button>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useWordStore } from '@/stores/word'
import { showToast, showDialog } from 'vant'

export default {
  name: 'Profile',
  setup() {
    const router = useRouter()
    const wordStore = useWordStore()
    
    // 用户信息
    const userInfo = ref({
      name: '单词学习者',
      description: '每天进步一点点',
      avatar: '',
      level: '初级学者',
      progress: 65
    })
    
    // 用户统计
    const userStats = ref({
      studyDays: 15,
      totalWords: 156,
      studyTime: '2.5小时',
      todayWords: 8,
      dailyGoal: 20,
      todayTime: 25,
      timeGoal: 60
    })
    
    // 成就徽章
    const achievements = ref([
      {
        id: 1,
        name: '初学者',
        icon: 'star-o',
        achieved: true,
        description: '完成第一个单词学习'
      },
      {
        id: 2,
        name: '坚持者',
        icon: 'fire-o',
        achieved: true,
        description: '连续学习7天'
      },
      {
        id: 3,
        name: '收藏家',
        icon: 'bookmark-o',
        achieved: false,
        description: '收藏50个单词'
      },
      {
        id: 4,
        name: '学霸',
        icon: 'medal-o',
        achieved: false,
        description: '学习100个单词'
      },
      {
        id: 5,
        name: '专家',
        icon: 'diamond-o',
        achieved: false,
        description: '连续学习30天'
      },
      {
        id: 6,
        name: '大师',
        icon: 'trophy-o',
        achieved: false,
        description: '学习500个单词'
      }
    ])

    // 计算属性
    const { favoriteWords } = wordStore

    // 方法
    const editProfile = () => {
      showDialog({
        title: '编辑资料',
        message: '此功能正在开发中...',
        confirmButtonText: '确定'
      })
    }

    const setGoal = () => {
      showDialog({
        title: '设置目标',
        message: '此功能正在开发中...',
        confirmButtonText: '确定'
      })
    }

    const goToRecord = () => {
      showToast('学习记录功能开发中')
    }

    const goToErrors = () => {
      showToast('错题本功能开发中')
    }

    const goToPlan = () => {
      showToast('学习计划功能开发中')
    }

    const goToSettings = () => {
      showToast('设置功能开发中')
    }

    const showBadgeDetail = (badge) => {
      showDialog({
        title: badge.name,
        message: badge.description,
        confirmButtonText: '确定'
      })
    }

    const startStudy = () => {
      router.push('/home')
    }

    // 检查成就
    const checkAchievements = () => {
      // 收藏家成就
      if (favoriteWords.length >= 50) {
        const badge = achievements.value.find(b => b.id === 3)
        if (badge && !badge.achieved) {
          badge.achieved = true
          showToast('🎉 获得成就：收藏家')
        }
      }
      
      // 学霸成就
      if (userStats.value.totalWords >= 100) {
        const badge = achievements.value.find(b => b.id === 4)
        if (badge && !badge.achieved) {
          badge.achieved = true
          showToast('🎉 获得成就：学霸')
        }
      }
    }

    // 生命周期
    onMounted(() => {
      if (wordStore.words.length === 0) {
        wordStore.loadWords()
      }
      checkAchievements()
    })

    return {
      userInfo,
      userStats,
      achievements,
      favoriteWords,
      editProfile,
      setGoal,
      goToRecord,
      goToErrors,
      goToPlan,
      goToSettings,
      showBadgeDetail,
      startStudy
    }
  }
}
</script>

<style scoped>
.user-card {
  display: flex;
  align-items: center;
  padding: 20px;
  margin: 12px;
  gap: 16px;
}

.user-avatar {
  flex-shrink: 0;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 4px 0;
}

.user-desc {
  font-size: 14px;
  color: var(--text-color-3);
  margin: 0 0 8px 0;
}

.user-level {
  display: flex;
  align-items: center;
  gap: 8px;
}

.level-progress {
  font-size: 12px;
  color: var(--text-color-2);
}

.stats-section {
  margin: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 12px 0;
  padding: 0 4px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
}

.stat-icon {
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
}

.stat-number {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
}

.stat-label {
  font-size: 12px;
  color: var(--text-color-3);
}

.goal-section {
  margin: 12px;
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.goal-progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.goal-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.goal-label {
  font-size: 14px;
  color: var(--text-color-2);
}

.goal-text {
  font-size: 12px;
  color: var(--text-color-3);
  text-align: right;
}

.menu-section {
  margin: 12px;
}

.achievement-section {
  margin: 12px;
  padding: 16px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: var(--background-color);
  transition: all 0.3s;
  cursor: pointer;
}

.badge-item.achieved {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #333;
}

.badge-item:not(.achieved) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.badge-name {
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
}

.bottom-actions {
  padding: 16px 12px 80px;
}
</style>